﻿<html>
  <head>
    <meta name="generator" content="h-smile:richtext"/>
  </head>
<body>
  <h1>behavior:select</h1>
  <p>Standard behavior of &lt;select&gt; lists. In principle it can be applied to any DOM element.</p>
  <h2>Elements</h2>
  <p>These elements have behavior:select applied by default:</p>
  <ul>
    <li><code>&lt;select size=&quot;2...N&quot;&gt;&lt;/select&gt;</code></li>
    <li><code>&lt;select|list&gt;&lt;/select&gt;</code></li></ul>
  <h2>Model</h2>
  <p>The <code>&lt;select&gt;</code> may contain <code>&lt;option&gt;</code> elements contained in arbitrary markup.</p>
  <p>The behavior treats &lt;option&gt;'s or any other DOM element with attribute <code>role=&quot;option&quot;</code> as a selectable entity.</p>
  <p>Selected option will have <code>:current</code> &nbsp;state flag set.</p>
  <p>Examples, simple select:</p>
  <pre>&lt;select&gt;
  &lt;option value=&quot;#ff0000&quot; selected&gt;Red&lt;/option&gt;
  &lt;option value=&quot;#00ff00&quot;&gt;Green&lt;/option&gt;
  &lt;option value=&quot;#0000ff&quot;&gt;Blue&lt;/option&gt;
&lt;/select&gt;
</pre>
  <p>and &lt;table&gt; behaving as a select:</p>
  <pre>&lt;style&gt;
  table.select { behavior:select; }
  table.select &gt; tr:current { color:white; background:blue; }
&lt;/style&gt;

&lt;table.select&gt;
  &lt;tr role=option value=&quot;#ff0000&quot;&gt;&lt;td&gt;Red&lt;/td&gt;&lt;td&gt;#FF0000&lt;td&gt;&lt;/tr&gt;
  &lt;tr role=option value=&quot;#00ff00&quot;&gt;&lt;td&gt;Green&lt;/td&gt;&lt;td&gt;#00FF00&lt;td&gt;&lt;/tr&gt;
  &lt;tr role=option value=&quot;#0000ff&quot;&gt;&lt;td&gt;Blue&lt;/td&gt;&lt;td&gt;#0000FF&lt;td&gt;&lt;/tr&gt;
&lt;/table&gt;
</pre>
  <h2>Attributes</h2>
  <p>This behavior knows about:</p>
  <ul>
    <li><code>size=integer</code> - number of visible elements in the list. Note: height of the select element can be overriden by CSS.</li>
    <li><code>name=&quot;name&quot;</code> - standard attribute <em>name</em> - name of the input element on a form.</li>
    <li><code>novalue=&quot;text&quot;</code> - if select has no <code>&lt;option selected&gt;</code> initially it will have this text rendered.</li>
		<li><code>as=&quot;type&quot;</code> - defines <code>&lt;option value=&quot;...&quot;&gt;</code> interpretation rule, accepts:<ul><li><code>as=&quot;auto&quot;</code>, default value, tries to parse option's value as integer, float, boolean or length value. If parsing fails it returns value as a string.</li>
				<li><code>as=&quot;integer&quot;</code>, tries to parse option's value as integer. If parsing fails it returns value as a string.</li>
				<li><code>as=&quot;float&quot;</code>, tries to parse option's value as float. If parsing fails it returns value as a string.</li>
				<li><code>as=&quot;numeric&quot;</code>, tries to parse option's value as either integer or float. If parsing fails it returns value as a string.</li>
				<li><code>as=&quot;string&quot;</code>, does not  parse option's value. Returns value as a string.</li></ul></li>
		</ul>
  <h2>Events</h2>
  <p>Other than standard set of events (mouse, keyboard, focus) behavior:button generates:</p>
  <ul>
    <li><code>SELECT_SELECTION_CHANGED</code> event, generated when user changes selection of the select (click on one of options). Posted event.</li>
    <li><code>SELECT_SELECTION_CHANGING</code> event, selection is about to change. Synchronous event.</li></ul>
  <h2>Methods</h2>
  <p>N/A - behavior:select does not introduce any specific methods.</p>
	<h2>Commands</h2>
	<p>Note: commands are invoked by calling <code>element.execCommand(&quot;cmd-name&quot;[,params])</code></p>
	<ul><li><b>&quot;set-current&quot;</b> - when the command is sent to an <code>&lt;option&gt;</code> inside the select it causes the option to be current; &nbsp;</li></ul>
  <h2>Properties</h2>
  <p>Other than standard properties of DOM elements the select also supports:</p>
  <ul>
    <li><code>options</code> - reference to DOM element that holds <code>&lt;option&gt;</code> list, in this case this is the element itself.</li></ul>
  <h2>Value</h2>
  <p>any, read/write. value of selected option. Value of the option is its value attribute or option's text if there is no value defined.</p>
  <h2>Selection change handling in script</h2>
  <h3>raw <code>onValueChanged</code> handler</h3>
  <pre>var btn = $(select#some);
btn.onValueChanged = function() { var v = this.value; ... }
</pre>
  <h3><code>on()</code> subscription</h3>
  <pre>var btn = $(select#some);
btn.on(&quot;change&quot;, function() { ... event handling code ... });
self.on(&quot;change&quot;, &quot;select#some&quot;, function() { ... event handling code ... });
</pre>
  <h3>decorators.tis handler</h3>
  <pre>include &quot;decorators.tis&quot;;
@change @on &quot;select#some&quot; :: ... event handling code ...;
</pre>
</body>
</html>